<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="../js/css/ionic.min.css"/>
    <link rel="stylesheet" href="../style/base.css"/>
    <link rel="stylesheet" href="../style/style.css"/>
    <script src="../js/js/ionic.bundle.min.js"></script>
    <title>精细查找</title>
</head>

<body>
    <div class="bar bar-header header">
        <button class="button return-btn">返回</button>
        <label class="item-input-wrapper hd-find-box">
            <i class="icon hd-find-icon"></i>
            <input type="search" class="hd-find-text" placeholder="搜索">
        </label>
        <button class="button pull-right hd-code-btn"></button>
    </div>

    <div class="content has-header">

        <div class="tabs tads-nav">
            <a class="tab-item" href="#">全部</a>
            <a class="tab-item" href="#">评论优先</a>
            <a class="tab-item" href="#">收藏优先</a>
            <a class="tab-item" href="#">精细查找<i class="tads-nav-icon"></i></a>
        </div>
<!---->
        <div class="search-item-tit">
          <button class="search-tit-btn fr" type="button">收起</button>国家</div>
        <div class="search-item-con">
            <ul class="row row-wrap">
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/country-icon1.png" alt=""/>
                        </span>
                        <em class="search-li-tit">法国</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/country-icon2.png" alt=""/>
                        </span>
                        <em class="search-li-tit">澳大利亚</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/country-icon3.png" alt=""/>
                        </span>
                        <em class="search-li-tit">智利</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/country-icon4.png" alt=""/>
                        </span>
                        <em class="search-li-tit">意大利</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/country-icon6.png" alt=""/>
                        </span>
                        <em class="search-li-tit">美国</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/country-icon7.png" alt=""/>
                        </span>
                        <em class="search-li-tit">阿根廷</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/country-icon8.png" alt=""/>
                                </span>
                        <em class="search-li-tit">新西兰</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/country-icon9.png" alt=""/>
                                </span>
                        <em class="search-li-tit">德国</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/country-icon10.png" alt=""/>
                                </span>
                        <em class="search-li-tit">南非</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/country-icon11.png" alt=""/>
                                </span>
                        <em class="search-li-tit">葡萄牙</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/country-icon12.png" alt=""/>
                                </span>
                        <em class="search-li-tit">匈牙利</em>
                    </a>
                </li>
            </ul>
        </div>

        <div class="search-item-tit"><button class="search-tit-btn fr" type="button">收起</button>类型</div>
        <div class="search-item-con">
            <ul class="row row-wrap">
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/type-icon1.png" alt=""/>
                                </span>
                        <em class="search-li-tit">红</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/type-icon2.png" alt=""/>
                                </span>
                        <em class="search-li-tit">白</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/type-icon3.png" alt=""/>
                                </span>
                        <em class="search-li-tit">粉红</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/type-icon4.png" alt=""/>
                                </span>
                        <em class="search-li-tit">甜</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/type-icon5.png" alt=""/>
                                </span>
                        <em class="search-li-tit">香槟及起泡</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/type-icon6.png" alt=""/>
                                </span>
                        <em class="search-li-tit">加强型</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                                <span class="search-li-pic">
                                    <img src="img/search/type-icon7.png" alt=""/>
                                </span>
                        <em class="search-li-tit">烈酒</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                            <span class="search-li-pic">
                                    <img src="img/search/type-icon8.png" alt=""/>
                                </span>
                        <em class="search-li-tit">无酒精饮品</em>
                    </a>
                </li>
            </ul>
        </div>


        <div class="search-item-tit"><button class="search-tit-btn fr" type="button">收起</button>饮用场合</div>
        <div class="search-item-con">
            <ul class="row row-wrap">
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/occ-icon1.png" alt=""/>
                        </span>
                        <em class="search-li-tit">商务宴请</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/occ-icon2.png" alt=""/>
                        </span>
                        <em class="search-li-tit">酒友交流</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/occ-icon3.png" alt=""/>
                        </span>
                        <em class="search-li-tit">情侣约会</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/occ-icon4.png" alt=""/>
                        </span>
                        <em class="search-li-tit">浪漫婚宴</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                         <span class="search-li-pic">
                            <img src="img/search/occ-icon5.png" alt=""/>
                        </span>
                        <em class="search-li-tit">友人相聚</em>
                    </a>
                </li>
                <li class="col-20">
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/occ-icon6.png" alt=""/>
                        </span>
                        <em class="search-li-tit">温馨家宴</em>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="search-li-pic">
                            <img src="img/search/occ-icon7.png" alt=""/>
                        </span>
                        <em class="search-li-tit">活力派对</em>
                    </a>
                </li>
            </ul>
         </div>

        <div class="search-item-tit"><button class="search-tit-btn fr" type="button">收起</button>饮用场合</div>
        <div class="search-item-con">
            <ul class="row row-wrap">
                <li class="col-33">
                    <a href="#"><em class="search-li-money">100元以下</em></a>
                </li>
                <li class="col-33">
                    <a href="#"><em class="search-li-money">100-500</em></a>
                </li>
                <li class="col-33">
                    <a href="#"><em class="search-li-money">500-1000</em></a>
                </li>
                <li class="col-33">
                    <a href="#"><em class="search-li-money">1000-3000</em></a>
                </li>
                <li class="col-33">
                    <a href="#"><em class="search-li-money">3000元以上</em></a>
                </li>
             </ul>
        </div>

        <div class="padding">
            <button class="button button-full claret-red-btn" type="button">完成</button>
        </div>

    </div>

</body>

</html>
